<script >
import {allFolder,allFile} from "@/api/image/demoImage";

export default {
  data() {
    return {
      activeName: null,
      sonActiveName: null,
      loadOk:false,
      src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      imgFolderList:[]
    };
  },
  mounted(){
    allFolder().then(response => {
      this.imgFolderList = response.data
    })
  },
  methods: {
    reloadSon(){
      this.sonActiveName = ""
    },
    async sonFolderChange() {
      if (this.activeName == undefined || this.sonActiveName == undefined) {
        return;
      }
      if (this.activeName == "" || this.sonActiveName == "") {
        return;
      }
      if (this.activeName == null || this.sonActiveName == null) {
        return;
      }
      const i = parseInt(this.activeName);
      const j = parseInt(this.sonActiveName);
      await this.loadImgList(i, j)
    },
    loadImgList(i,j){

      //得到要被加载的文件夹
      const folder = this.imgFolderList[i].sonList[j];

      //判断是否已加载
      if(this.imgFolderList[i].sonList[j].loadOk) {
        this.loadOk = true
        return
      }else{
        this.loadOk = false
      }

      //加载
      allFile(folder.folderId).then(response => {
        this.imgFolderList[i].sonList[j].sonList = response.data
        this.imgFolderList[i].sonList[j].srcList = []
        for (let x = 0; x < response.data.length; x++) {
          this.imgFolderList[i].sonList[j].srcList[x] = response.data[x].url
        }
        this.loadOk = true
      })
      console.log(this.imgFolderList[i].sonList[j])
    }
  }
}
</script>

<template>
  <div style="padding: 3rem">
    <el-collapse v-model="activeName" @change="reloadSon" accordion>
      <el-collapse-item v-for="(item , index) in imgFolderList" :title="item.folderName" :name="index.toString()">
        <div style="padding: 1rem;">
          <el-collapse v-model="sonActiveName" @change="sonFolderChange()" accordion>
            <el-collapse-item v-for="(sonItem , sonIndex) in item.sonList"  :title="sonItem.folderName" :name="sonIndex.toString()" style="margin-top: 2px">
              <template #title>
                <div class="el-collapse-item-title">{{ sonItem.folderName }}</div>
              </template>
              <div v-if="loadOk" style="padding: 1rem;width:100%;display: flex;justify-content:space-around;flex-wrap:wrap;">
                <el-image v-for="imgItem in sonItem.sonList" :key="imgItem.fileId" :src="imgItem.url" :preview-src-list="sonItem.srcList" style="height: 20rem;padding: 2px" ></el-image>
              </div>
              <div v-else>
                loading......
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style scoped lang="scss">
.el-collapse-item-title {
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

</style>
